<template>
  <div class="portfolio-page">
    <h1>项目作品集</h1>
    
    <div class="portfolio-filters">
      <button 
        v-for="(filter, index) in filters" 
        :key="index"
        :class="['filter-button', { active: activeFilter === filter }]"
        @click="activeFilter = filter"
      >
        {{ filter }}
      </button>
    </div>
    
    <div class="portfolio-grid">
      <div 
        v-for="(project, index) in filteredProjects" 
        :key="index"
        class="portfolio-item"
      >
        <img :src="project.image" :alt="project.title" class="portfolio-image">
        <div class="portfolio-overlay">
          <div class="portfolio-category">{{ project.category }}</div>
          <h3 class="portfolio-title">{{ project.title }}</h3>
          <div class="portfolio-links">
            <a :href="project.link" class="portfolio-link"><i class="fas fa-link"></i></a>
            <a href="#" class="portfolio-link" @click.prevent="openDetails(project)"><i class="fas fa-search-plus"></i></a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeFilter: '全部',
      filters: ['全部', '企业应用', '微服务架构', '开源项目', '技术分享'],
      projects: [
        {
          id: 1,
          title: '企业级电商平台',
          category: '企业应用',
          image: 'https://images.unsplash.com/photo-1556155092-490a1ba16284?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80',
          client: '某电商集团',
          date: '2023',
          tags: ['Java', 'Spring Cloud', '微服务', 'MySQL', 'Redis'],
          description: '基于Spring Cloud的企业级电商平台，支持高并发订单处理和智能库存管理。项目包括用户管理、商品管理、订单管理、支付系统和售后服务等模块。',
          link: '#'
        },
        {
          id: 2,
          title: '分布式定时任务系统',
          category: '系统工具',
          image: 'https://images.unsplash.com/photo-1551033406-611cf9a28f67?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1467&q=80',
          client: '内部项目',
          date: '2022',
          tags: ['Java', 'Spring Boot', 'MongoDB', 'Quartz', 'Docker'],
          description: '开发了一套分布式定时任务调度平台，支持任务动态配置、失败重试、故障转移和监控告警等功能，提高了系统运维效率和稳定性。',
          link: '#'
        },
        {
          id: 3,
          title: '实时数据分析平台',
          category: '数据分析',
          image: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80',
          client: '某金融科技公司',
          date: '2022',
          tags: ['Java', 'Kafka', 'Elasticsearch', 'Spring Boot', 'Vue.js'],
          description: '构建了金融交易数据实时处理和分析平台，利用Kafka进行消息队列处理，Elasticsearch进行数据存储和检索，支持复杂查询和可视化展示。',
          link: '#'
        },
        {
          id: 4,
          title: '智能客服系统',
          category: 'AI应用',
          image: 'https://images.unsplash.com/photo-1535378917042-10a22c95931a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80',
          client: '某保险公司',
          date: '2021',
          tags: ['Java', 'Spring Boot', 'NLP', 'Vue.js', 'WebSocket'],
          description: '开发智能客服系统，集成自然语言处理技术，支持智能问答、多轮对话和人工坐席协同，大幅提升了客服效率和用户满意度。',
          link: '#'
        },
        {
          id: 5,
          title: '微服务监控平台',
          category: '运维工具',
          image: 'https://images.unsplash.com/photo-1558494949-ef010cbdcc31?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80',
          client: '内部项目',
          date: '2021',
          tags: ['Java', 'Spring Boot', 'Prometheus', 'Grafana', 'Docker'],
          description: '搭建了微服务架构的全链路监控平台，包括系统资源监控、应用性能监控、业务指标监控和告警管理，提高了系统可观测性。',
          link: '#'
        },
        {
          id: 6,
          title: '移动应用后端系统',
          category: '移动开发',
          image: 'https://images.unsplash.com/photo-1618761714954-0b8cd0026356?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80',
          client: '某互联网创业公司',
          date: '2020',
          tags: ['Java', 'Spring Boot', 'MySQL', 'Redis', 'RabbitMQ'],
          description: '为移动社交应用开发后端系统，包括用户认证、内容管理、消息推送和社交关系管理等功能，支持百万级用户规模。',
          link: '#'
        }
      ]
    }
  },
  computed: {
    filteredProjects() {
      if (this.activeFilter === '全部') {
        return this.projects
      } else {
        return this.projects.filter(project => project.category === this.activeFilter)
      }
    }
  },
  methods: {
    openDetails(project) {
      // 这里可以实现项目详情弹窗功能
      alert(`项目详情: ${project.title}\n${project.description}`)
    }
  }
}
</script>

<style scoped>
.portfolio-page {
  margin-top: 40px;
}

.portfolio-filters {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin: 40px 0;
  flex-wrap: wrap;
}

.filter-button {
  background-color: transparent;
  border: 1px solid #ddd;
  padding: 8px 20px;
  border-radius: 30px;
  cursor: pointer;
  transition: all 0.3s;
}

.filter-button.active {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
}

.filter-button:hover:not(.active) {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.portfolio-item {
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
}

.portfolio-item:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.portfolio-image {
  width: 100%;
  height: 250px;
  object-fit: cover;
  display: block;
}

.portfolio-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(23, 37, 85, 0.95);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.3s;
}

.portfolio-item:hover .portfolio-overlay {
  opacity: 1;
}

.portfolio-title {
  color: white;
  font-size: 1.5rem;
  margin-bottom: 10px;
  text-align: center;
}

.portfolio-category {
  color: var(--accent-color);
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 1px;
  margin-bottom: 20px;
}

.portfolio-links {
  display: flex;
  gap: 20px;
}

.portfolio-link {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: white;
  color: var(--primary-color);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s;
}

.portfolio-link:hover {
  background-color: var(--secondary-color);
  color: white;
  transform: scale(1.1);
}

@media (max-width: 1200px) {
  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .portfolio-grid {
    grid-template-columns: 1fr;
  }
}
</style> 